import React, { memo, useState, useEffect } from 'react';
import { Form, Empty } from 'antd';
import ItemChart from './itemChart';
import SalaryContrastDetails from './SalaryContrastDetails';
import styles from './index.less';

const SalaryChart = ({ chartParam, chartData, loading }) => {
    const [optionData, setOptionData] = useState([])

    const { chartType, globalType } = chartParam

    useEffect(() => {
        if (chartData && chartData.length) {
            switch (chartType) {
                case 'line':
                case 'bar':
                case 'bullet':
                    setOptionData(chartData)
                    break;
                case 'sunburst':
                    // eslint-disable-next-line no-case-declarations
                    const { sunList = [] } = (chartData && chartData[0]) || {};
                    setOptionData(sunList)
                    break;
                case 'stackBar':
                    // eslint-disable-next-line no-case-declarations
                    const { other = [] } = (chartData && chartData[0]) || {};
                    setOptionData(other)
                    break;
                default:
                    break;
            }
        }

        return () => {
            setOptionData([])
        }
    }, [chartData])

       return (
           <div className={styles.chartBox}>
               {optionData.length === 0 && !loading ? (
                   <div style={{ height: 360, overflow: 'hidden' }}>
                       <Empty style={{ marginTop: 130 }} image={Empty.PRESENTED_IMAGE_SIMPLE} />
                   </div>
               ) : (
                   <>
                       <ItemChart optionData={optionData} itemType={globalType} chartType={chartType} />
                       {
                            chartType === 'bullet' ? <SalaryContrastDetails type={globalType} contrastData={optionData}/> : null
                       }
                   </>
                )
               }
           </div>
    );
};

export default memo(Form.create()(SalaryChart));
